/* 选择审批人组件
 * @Author: Setsuna
 * @Email: 601890383@qq.com
 * @FilePath: \src\components\getQuotaApprove\index.tsx
 * @Date: 2021-09-16 17:26:12
 * @LastEditTime: 2021-09-17 14:25:35
 */
import React, { useState, useEffect, useImperativeHandle } from 'react'
import { Modal, Radio, Spin } from 'antd'
import './index.scss'
import quotaApis from '@/apis/AboutQuota'
import { http } from '@/lib'
import Search from 'antd/lib/input/Search'

const QuotaApprove = props => {
  const [visible, setVisible] = useState(false) // 是否显示模态框
  const [index, setIndex] = useState(-1) // 未知
  const [personList, setPersonList] = useState([]) // 审批人列表
  const [id, setId] = useState(0) // 被选择的审批人id值
  const [loading, setLoading] = useState(false) // 是否加载中
  // 页面加载时，获取审批人列表
  useEffect(() => {
    if (props.ids) {
      getPersonList()
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [index])
  // 获取审批人列表
  const getPersonList = (realName?: any) => {
    // 审批人列表 获取审批人列表
    let params = {
      ids: props.ids,
    }
    if (realName) {
      params['realName'] = realName
    }
    setLoading(true);
    http.post(quotaApis.getPersonList, params).then(resp => {
      setLoading(false);
      setPersonList(resp.data)
    })
  }
  useImperativeHandle(props.cRef, () => ({
    // handleOk 就是暴露给父组件的方法
    handelCeck: index => {
      setIndex(index)
      setVisible(true)
    },
  }))
  const handleOk = () => {
    let data = personList.filter(item => item.id === id)
    props.handCilck(data)
    setVisible(false)
  }
  // 关闭模态框
  const handleCancel = () => {
    setVisible(false)
  }
  // 设置选择人的id值
  const onChange = e => {
    setId(e.target.value)
  }
  return (
    <div>
      <Modal title="选择审批人" visible={visible} onOk={handleOk} onCancel={handleCancel}>
        {loading?<div className="example"><Spin /></div>:<Radio.Group style={{ width: '100%' }} onChange={onChange}>
          <Search
            placeholder="请输入"
            enterButton="搜索"
            onPressEnter={(e: any) => {
              getPersonList(e.target.value)
            }}
            onSearch={value => getPersonList(value)}
          />
          <div className="sollor">
            {personList.map((item: any, index: any) => (
              <div className="weaper-gm" key={item.id}>
                <Radio value={item.id}>
                  <div className="weaper-name">
                    <div className="circle-gm">{item.realName}</div>
                    <div className="mar-left">{item.realName}{item.userCode}</div>
                  </div>
                </Radio>
              </div>
            ))}
          </div>
        </Radio.Group>}
      </Modal>
    </div>
  )
}

export default QuotaApprove
